<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .cut {
        width: 750px;
        height: 500px;
        margin: 30px auto;
      }
    
      .test-button {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
      }
    
      .btn {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #c0ccda;
        color: #1f2d3d;
        text-align: center;
        outline: none;
        margin:20px 10px 0px 0px;
        padding: 9px 15px;
        font-size: 14px;
        border-radius: 4px;
        color: #fff;
        background-color: #50bfff;
        border-color: #50bfff;
        transition: all .2s ease;
        text-decoration: none;
        user-select: none;
      }
    
      .des {
        line-height: 30px;
      }
    
      code.language-html {
        padding: 10px 20px;
        margin: 10px 0px;
        display: block;
        background-color: #333;
        color: #fff;
        overflow-x: auto;
        font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono;
        border-radius: 5px;
        white-space: pre;
      }
      /* 截图遮罩层去掉 */
      .cropper-modal{
        background: none !important;
      }
      @keyframes slide {
        0%  {
          background-position: 0 0;
        }
        100% {
          background-position: -100% 0;
        }
      }
    
  </style>
</head>
<body>
  <div id="app">
    <div class="cut">
      <vue-cropper :ref="'cropper' + 0" :img="option.img" :output-size="option.size" :output-type="option.outputType" :info="false" :fixed="false" :full="option.full" :fixed-number="option.fixedNumber" :can-move="option.canMove" :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox" :original="option.original" :auto-crop="option.autoCrop" :auto-crop-width="option.autoCropWidth" :auto-crop-height="option.autoCropHeight" :center-box="option.centerBox" :high="option.high" @img-load="imgLoad" mode="100%" :infoTrue="false" :can-scale="false">
      </vue-cropper>
      <button @click="startCrop('cropper' + 0,0)" class="btn">截图</button>
    </div>
    <div class="test-button">
      <!-- <label class="btn" for="uploads">upload</label>
      <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg"
        @change="uploadImg($event, 1)"> -->
    </div>
  </div>
  <script src="./static/js/vue.min.js"></script>
  <script src="./static/js/element-ui.min.js"></script>
  <script src="./static/js/cropper.min.js"></script>
  <script src="./static/js/axios.min.js"></script>
</body>
</html>
<script>
Vue.use(window['vue-cropper'])
const app = new Vue({
   el: '#app',
      data: {
        option: {
          img: 'https://image.v1.vodeshop.com/Fn81G9JaxJKl2TzONEw82vw1RC5c',
          size: 1,
          full: false,
          outputType: 'png',
          canMove: true,
          fixedBox: false,
          original: true,
          canMoveBox: true,
          autoCrop: true,
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 200,
          autoCropHeight: 200,
          centerBox: true,
          high: true,
          fixedNumber: [1, 2]
        },
        // 存放截图数据
        screenshotArr:[]
      },
      methods: {
        // 截图按钮
        startCrop(refDom,inx) {
          console.log(refDom,inx)
          let newType = true
          let newAxy = this.$refs[refDom].getCropAxis() // 获取所在截图所在容器的坐标
          let newImgxy = this.$refs[refDom].getImgAxis() // 获取图片所在容器的坐标
          let newDomW = this.$refs[refDom].cropW // 截图宽度
          let newDomH = this.$refs[refDom].cropH // 截图高度
          let newx = newAxy.x1 - newImgxy.x1 // 截图位于图片left
          let newy = newAxy.y1 - newImgxy.y1  // 截图位于图片top
          let newb = newImgxy.y2 - newAxy.y2 // 截图位于图片bottom
          let newr = newImgxy.x2 - newAxy.x2 // 截图位于图片right
          if(this.screenshotArr.length > 0 ){
            for (let i = 0; i < this.screenshotArr.length; i++) {
              // 判断是否重叠 -- 结束遍历直接跳出
              if(!(this.screenshotArr[i].img_x + this.screenshotArr[i].img_w < newx ||this.screenshotArr[i].img_h + this.screenshotArr[i].img_y < newy || this.screenshotArr[i].img_r + this.screenshotArr[i].img_w < newr || this.screenshotArr[i].img_h + this.screenshotArr[i].img_b < newb)){
                newType = false
                break
              }
            }
          }
          if(newType){
              this.$refs[refDom].getCropData(res=>{ // 生成截图
              let serial = this.screenshotArr.length > 0 ? this.screenshotArr[this.screenshotArr.length -1 ].serial + 1 : 1 // 处理截图编号
              // 存放上个截图的值
              this.screenshotArr.push({
                img_x:newx, // top
                img_y:newy, // left
                img_b:newb, // bottom
                img_r:newr, // right
                img_w:newDomW,
                img_h:newDomH,
                serial
              })
              // 追加红框到图片中
              var node=document.createElement("div");
              node.className = `screenshot${inx}`
              node.style = `position: absolute;
                            top: ${newy}px;
                            left: ${newx}px;
                            width: ${newDomW}px;
                            height: ${newDomH}px;
                            line-height:${newDomH}px;
                            border: 1px solid red;
                            color:red`
              node.innerHTML = `<div style='text-align:center;'>${inx + 1}-${serial}</div>`
              document.querySelectorAll(".cropper-box-canvas")[inx].appendChild(node); // 追加节点
            })
          }else{
            this.$notify.error({
              title: '错误',
              message: '当前截图与存在的截图重叠了,不可以进行截图操作了喔亲，请挪下截图看重新截图哦!'
            });
          }
        },
        uploadImg(e, num) { //上传图片
          console.log(e)
          var file = e.target.files[0]
          if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
            this.$message.error('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
            return false
          }
          var reader = new FileReader()
          reader.onload = (e) => {
            let data
            if (typeof e.target.result === 'object') {
              // 把Array Buffer转化为blob 如果是base64不需要
              data = window.URL.createObjectURL(new Blob([e.target.result]))
            } else {
              data = e.target.result
            }
            if (num === 1) {
              this.option.img = data
            }
          }
          reader.readAsArrayBuffer(file)
        },
        imgLoad(msg) {
          console.log(msg,'imgLoad')
        }
      }
})
</script>